<template>
  <view class="container">
    <!-- 顶部标签切换 -->
    <view class="top-card">
      <view 
        class="option" 
        :class="{ active: activeTab === 'device' }" 
        @click="switchTab('device')"
      >
        <text class="option-text">设备信息</text>
        <view class="option-underline"></view>
      </view>
      <view 
        class="option" 
        :class="{ active: activeTab === 'gateway' }" 
        @click="switchTab('gateway')"
      >
        <text class="option-text">网关信息</text>
        <view class="option-underline"></view>
      </view>
    </view>

    <!-- 设备信息卡片（条件显示） -->
    <view class="bottom-card" v-if="activeTab === 'device'">
      <!-- 设备图片 :src="baseURL + item.picUrl"  -->
      <view class="image-container">
        <image 
          :src="baseURL + deviceInfo.picUrl" 
          class="card-img" 
          mode="aspectFill"
        />
      </view>

      <!-- 设备信息列表 -->
      <view class="info-list">
        <view class="info-item">
          <text class="info-label">设备名称:</text>
          <text class="info-value">{{ deviceInfo.deviceName }}</text>
        </view>
              <view class="info-item">
          <text class="info-label">设备地址:</text>
          <text class="info-value">  {{ deviceInfo.address }}</text>
        </view>
  
        <view class="info-item">
          <text class="info-label">设备唯一号:</text>
          <text class="info-value">{{ deviceInfo.deviceKey }}</text>
        </view>
        
    
        <view class="info-item">
          <text class="info-label">设备型号:{{ deviceInfo.deviceType }}</text>
          <text class="info-value">{{ getLabel('mqtt_device_type', deviceInfo.deviceType) }}</text>  
        </view>
      
        
        <view class="info-item">
          <text class="info-label">备 注:</text>
          <text class="info-value">-</text>
        </view>
      </view>
    </view>

    <!-- 网关信息卡片（条件显示） -->
    <view class="bottom-card" v-else-if="activeTab === 'gateway'">
      <!-- 网关信息列表 -->
      <view class="info-list">
        <view class="info-item">
          <text class="info-label">SN编号:</text>
          <text class="info-value">{{deviceInfo.gatewayId}}</text>
        </view>
    
        
        <view class="info-item">
          <text class="info-label">固件版本:</text>
          <text class="info-value">{{ deviceInfo.firmwareVersion }}</text>
        </view>
        
        <view class="info-item">
          <text class="info-label">联网方式:</text>
          <text class="info-value">
         <text class="info-value"> {{ getLabel('mqtt_device_networktype', deviceInfo.networkType||'') }}</text>  
          </text>
        </view>
        
        <view class="info-item">
          <text class="info-label">网关状态:</text>
         <text class="info-value"> 在线</text>  
        </view>
        
        <view class="info-item">
          <text class="info-label">远程上下载:</text>
          <text class="info-value">/</text>
        </view>
        
        <view class="info-item">
          <text class="info-label">物联网卡:</text>
          <text class="info-value">{{ deviceInfo.firmwareId }}</text>
        </view>
        

      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import {  getLabel } from '@/utils/wxdict'

import { config } from '@/config'
import { getDevice,DeviceVO } from "@/pagesS1/api/deviceinfo";

const props = defineProps({
  search: {
    type: Object,
    required: true,
  },
});

const baseURL = config.baseUrl+"/cert/"
// 当前激活的标签（device/gateway）
const activeTab = ref('device'); // 默认显示设备信息
// 切换标签
const switchTab = (tab: 'device' | 'gateway') => {
  activeTab.value = tab;
};
const deviceInfo = ref<Partial<DeviceVO>>({});


onMounted(async (query? : any) => { 
  const res = await getDevice(props.search.deviceId)
  deviceInfo.value = res.data
});
</script>

<style lang="scss" scoped>
.container {
  background-color: #f5f7fa;
  min-height: 100vh;
}
/* 顶部标签卡片 */
.top-card {
  display: flex;
  background-color: #ffffff;
  border-radius: 16rpx;
  padding: 0 30rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);

  .option {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 30rpx 0;
    position: relative;
    cursor: pointer;

    .option-text {
      font-size: 32rpx;
      color: #666;
    }

    // 选中状态样式
    &.active {
      .option-text {
        color: #4d9ce1;
        font-weight: 500;
      }

      .option-underline {
        position: absolute;
        bottom: 0;
        width: 60rpx;
        height: 6rpx;
        background-color: #4d9ce1;
        border-radius: 3rpx;
      }
    }

    // 默认隐藏下划线
    .option-underline {
      display: none;
    }

    // 选中时显示下划线
    &.active .option-underline {
      display: block;
    }
  }
}

/* 下方详情卡片通用样式 */
.bottom-card {
  background-color: #ffffff;
  border-radius: 16rpx;
  padding: 30rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
  margin-bottom: 20rpx;

  /* 图片容器（仅设备信息有） */
  .image-container {
    width: 100%;
    height: 400rpx; /* 固定图片高度 */
    margin-bottom: 30rpx;
    overflow: hidden;
    border-radius: 12rpx;

    .card-img {
      width: 100%;
      height: 100%;
      object-fit: cover; /* 保持比例填充容器 */
    }
  }

  /* 信息列表通用样式 */
  .info-list {
    .info-item {
      display: flex;
      padding: 22rpx 0;
      border-bottom: 2rpx solid #f5f5f5;
      
      &:last-child {
        border-bottom: none;
      }

      .info-label {
        width: 200rpx;
        font-size: 28rpx;
        color: #666;
      }

      .info-value {
        flex: 1;
        font-size: 28rpx;
        color: #333;
        display: flex;
        align-items: center;

        // 地址定位图标
        .location-icon {
          width: 32rpx;
          height: 32rpx;
          margin-left: 10rpx;
          tint-color: #4d9ce1;
        }

        // 信号图标
        .signal-icon {
          width: 32rpx;
          height: 32rpx;
          margin-right: 8rpx;
          tint-color: #4d9ce1;
        }

        // 在线状态样式
        &.status-online {
          color: #00b42a; // 绿色表示在线
          font-weight: 500;
        }
        // 离线状态样式
        &.status-offline {
          color: #ff0000; // 红色表示离线
          font-weight: 500;
        }
      }
    }
  }
}
</style>